<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <!-- 
            列表过滤：
                1.通过watch侦听属性
                    1.首先给定一个对象数组，存储所有的对象
                    2.给定一个过滤数组，用来存储v-for遍历展示符合条件的对象
                    3.watch侦听input输入框通过v-model双向绑定的keyword变量，重新通过persons原数组过滤拿到过滤后的对象数组
                    4.过滤的方法是filter，返回所有对象中name属性中keyword下标不为-1的对象，其中空字符串也是返回0，而不是-1
                    5.需要注意的是，我们必须加上immediate：true这个属性，要不然刚开始的personFilter是空数组，因为keyword并没有发生变化，所以也不会给personFilter赋值
                2.通过computed计算属性
                    1.首先给定一个对象数组，存储所有的对象
                    2.通过计算属性声明一个过滤数组，用来存储v-for遍历展示符合条件的对象
                    3.过滤数组的get方法中return this.原数组.filter()符合条件的对象
                    4.由于keyword变化后，计算属性会自动更新，所以不需要我们去关注第一次的过滤数组为空的情况
                3.v-show/v-if
                    1.正常数据，不需要额外的过滤数组
                    2.直接在v-for的元素上添加v-show或者v-if来选择展示与否，条件就是当前对象的name属性的indexOf(keyword) != -1
         -->
        <h1>watch侦听属性</h1>
        <div id="root1">
            <input v-model="keyword" type="text" />
            <ul>
                <li v-for="(person, index) in personFilter" :key="index">
                    {{person.name}}--{{person.age}}
                </li>
            </ul>
        </div>
        <hr />

        <h1>computed计算属性</h1>
        <div id="root2">
            <input v-model="keyword" type="text" />
            <ul>
                <li v-for="(person, index) in personFilter" :key="index">
                    {{person.name}}--{{person.age}}
                </li>
            </ul>
        </div>
        <hr />

        <h1>v-show/v-if</h1>
        <div id="root3">
            <input v-model="keyword" type="text" />
            <ul>
                <li
                    v-for="(person, index) in persons"
                    v-show="person.name.indexOf(keyword) != -1"
                    :key="index"
                >
                    {{person.name}}--{{person.age}}
                </li>
            </ul>
        </div>
        <script>
            const vm1 = new Vue({
                data() {
                    return {
                        keyword: "",
                        persons: [
                            { name: "马冬梅", age: 21 },
                            { name: "周冬雨", age: 22 },
                            { name: "周杰伦", age: 23 },
                            { name: "温兆伦", age: 24 },
                        ],
                        personFilter: "",
                    };
                },
                watch: {
                    keyword: {
                        immediate: true,
                        handler(val) {
                            this.personFilter = this.persons.filter(
                                (person) => {
                                    return person.name.indexOf(val) != -1;
                                }
                            );
                        },
                    },
                },
            });

            vm1.$mount("#root1");
        </script>
        <script>
            const vm2 = new Vue({
                data() {
                    return {
                        keyword: "",
                        persons: [
                            { name: "马冬梅", age: 21 },
                            { name: "周冬雨", age: 22 },
                            { name: "周杰伦", age: 23 },
                            { name: "温兆伦", age: 24 },
                        ],
                    };
                },
                computed: {
                    personFilter() {
                        return this.persons.filter((person) => {
                            return person.name.indexOf(this.keyword) != -1;
                        });
                    },
                },
            });

            vm2.$mount("#root2");
        </script>
        <script>
            const vm3 = new Vue({
                data() {
                    return {
                        keyword: "",
                        persons: [
                            { name: "马冬梅", age: 21 },
                            { name: "周冬雨", age: 22 },
                            { name: "周杰伦", age: 23 },
                            { name: "温兆伦", age: 24 },
                        ],
                    };
                },
            });

            vm3.$mount("#root3");
        </script>
    </body>
</html>
